<template>
	<view class="view-box">
		<navBar title="选择项目" @goBack="uni.navigateBack()"></navBar>
		<scroll-view @scrolltolower="scrolltolower" scroll-y :style="{height: 'calc(100vh - ' + containerOutsideHeight + 'px)'}">
			<view class="select-project">
				<view class="search">
					<u-search @search="confirmSearch" @change="confirmSearch" v-model="searchForm.keyWord"
						placeholder="请输入关键字" :showAction="false" clearabled height="88upx" />
				</view>

				<view class="project-list">
					<view @click="selectProjectItem(item)" v-for="(item, index) in projectArray" :key="index" class="project-item">
						<view>{{item.name}}</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import { getSystemHeightInfo } from "@/utils/common.js";
	import { mjsProject_list } from "@/api/mjs.js"
	export default {
		name: "select-task-project",
		data() {
			return {
				// 容器之外的高度
				containerOutsideHeight: 0,
				// 分页器
				paging: {
					pageNum: 1,
					pageSize: 20,
					total: 0,
				},
				// 项目列表
				projectArray: [],
				// 搜索表单
				searchForm: {
					keyWord: "",
				},
				// 是否正在加载中
				isLoading: false,
			}
		},
		async onLoad(options) {
			this.initContainerData();
			this.projectArray = await this.getProjectArray();
		},
		methods: {
			/** 初始化容器数据 */
			initContainerData() {
				const { stateHeight, bottomHeight, navbarHeight, tabbarHeight } = getSystemHeightInfo();
				this.containerOutsideHeight = stateHeight + bottomHeight + navbarHeight + tabbarHeight;
			},

			/** 获取项目列表 - 在建状态 */
			getProjectArray() {
				return new Promise(async resolve => {
					const { pageNum, pageSize } = this.paging;

					let params = {
						currPage: pageNum,
						pageSize,
						projectId: uni.getStorageSync('isOwner'),
						params: {
							projectId: uni.getStorageSync('isOwner'),
							name:this.searchForm.keyWord,
							pmStates:['zj', 'zt']
						},
					};
					let response  = await mjsProject_list(params);
					this.paging.total = response.result.total;
					resolve(response.result.list || []);
				});
			},

			/** 容器滚动到底部 */
			async scrolltolower() {
				// 判断是否有下一页
				if (!this.isLoading && this.paging.pageNum * this.paging.pageSize < this.paging.total) {
					// 加载...
					this.isLoading = true;
					this.paging.pageNum++;
					this.projectArray = this.projectArray.concat(await this.getProjectArray());
					this.isLoading = false;
				}
			},

			/** 选择某一个项目 */
			selectProjectItem(item) {
				const eventChannel = this.getOpenerEventChannel();
				uni.navigateBack({
					success: () => {
						eventChannel.emit("getRetrunData", {
							data: item
						})
					}
				});
			},

			/** 确认搜索 */
			async confirmSearch() {
				this.paging.pageNum = 1;
				this.projectArray = await this.getProjectArray();
			},
		}
	}
</script>

<style scoped lang="scss">
	.view-box {
		/* #ifdef MP-WEIXIN */
		padding-top: 200rpx;
		/* #endif */
	}

	.select-project {
		font-size: 32upx;

		.search {
			padding: 42upx 36upx 14upx 28upx;
			position: sticky;
			top: 0px;
			border-top: 1px solid #fff;
			background: #fff;
		}

		.project-list {
			padding: 0 36upx 0 28upx;
			color: #445469;
			font-weight: 500;

			.project-item {
				padding: 42upx 0 28upx 28upx;
				border-bottom: 1px solid #e2e5ed;

				>view {
					display: -webkit-box;
					-webkit-line-clamp: 3;
					/* 显示三行文本 */
					-webkit-box-orient: vertical;
					text-overflow: ellipsis;
					white-space: normal;
					word-wrap: break-word;
					overflow: hidden;
				}

				&:last-of-type {
					border-bottom: none;
				}
			}
		}
	}
</style>